<template>
    <div>
        <div style="margin-top: 20px;">
            <el-row :gutter="15">
                <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
                    <el-col :span="8">
                        <el-form-item label="房间名称" prop="field107">
                            <el-input v-model="formData.roomNameInputed" placeholder="请输入" clearable
                                :style="{ width: '100%' }">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="订单状态" prop="statusSelections">
                            <!-- {{ formData.statusSelectd }} -->
                            <el-select v-model="formData.statusSelectd" placeholder="请选择" clearable
                                :style="{ width: '100%' }">
                                <el-option v-for="(item, index) in statusSelections" :key="index" :label="item.label"
                                    :value="item.value" :disabled="item.disabled"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="" prop="field109">
                            <el-button type="primary" icon="el-icon-search" size="medium" @click="selectOrders">
                                检索</el-button>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="" prop="field111">
                            <el-button type="primary" size="medium"> 网上订单登记 </el-button>
                        </el-form-item>
                    </el-col>
                    <el-col :span="16">
                        <el-form-item label="" prop="field115">
                            <el-button type="primary" size="medium"> 现场订单登记</el-button>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2">
                        <el-form-item label="" prop="field116">
                            <el-button type="primary" size="medium"> 删除 </el-button>
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-row>
        </div>
        <el-table v-loading="loading" :data="OrdersList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="id" align="center" prop="id" />
            <el-table-column label="房间名称" align="center" prop="rname" />
            <el-table-column label="房间号" align="center" prop="rnum" />
            <el-table-column label="姓名" align="center" prop="pname" />
            <el-table-column label="手机号" align="center" prop="phone" />
            <el-table-column label="入住日期" align="center" prop="intime" />
            <el-table-column label="离店日期" align="center" prop="outtime" />
            <el-table-column label="住房总价" align="center" prop="money" />
            <el-table-column label="状态" align="center" prop="roomOrderStatus.status" />
            <el-table-column label="创建时间" align="center" prop="createtime" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="Unsubscribe(scope.row)"
                        v-show="scope.row.status === 1 || scope.row.status === 2"
                       >退订</el-button>
                    <el-button size="mini" type="text" icon="el-icon-delete" @click="deleteOrder(scope.row.id)"
                        v-show="scope.row.status === 4 || scope.row.status === 3"
                        >删除</el-button>
						<el-button size="mini" type="text" icon="el-icon-document-copy" @click="generateBill(scope.row)" 
						    v-show="scope.row.status === 2 || scope.row.status === 4"  
						    >生成发票</el-button>
							
                </template>
            </el-table-column>
        </el-table>
        <div>
            <el-pagination :page-size=8 :pager-count="pageInfo.pageCount" layout="prev, pager, next"
                :total="pageInfo.total" :current-page="pageInfo.currentPage" @current-change="handleCurrentChange">
            </el-pagination>
        </div>

    </div>
</template>
<script>
import { deleteOrderById, initOrders, listOrders, updateOrderStatus,addBill} from '../../../api/shx/orders/orders';
export default {

    data() {
        return {
            pageInfo: {
                pageCount: undefined,
                currentPage: 1,
                total: undefined
            },
            OrdersList: [],
		 
            // 查询参数
            queryParams: {
                rname: '-1', // -1表示查询所有
                statusId: '-1', // -1表示查询所有
                pageNum: 1,
                pageSize: 8,
            },
            formData: {
                statusSelectd: undefined,
                roomNameInputed: undefined,
            },
            rules: {
                field107: [{
                    required: true,
                    message: '请输入',
                    trigger: 'blur'
                }],
                field108: [{
                    required: true,
                    message: '请选择',
                    trigger: 'change'
                }],
            },
            statusSelections: [{
                "label": "待支付",
                "value": 1
            }, {
                "label": "已支付",
                "value": 2
            }, {
                "label": "已退订",
                "value": 3
            }, {
                "label": "已完成",
                "value": 4
            }],
			form:{
				orderId:null,
				num:null,
				billNum:null,
				createTime:null,
				rate:null,
				money:null,
				retemoney:null,
				info:null,
				del:null
			}
        }
    },


    created() {
        this.getList();
        this.myinitOrders();
    },
    methods: {
        // 分页处理
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.queryParams.pageNum = val
            this.getList()
        },
        // 逻辑删除
        async deleteOrder(id) {
            console.log("点击删除");
            await deleteOrderById({ id: id }).then(response => {
                console.log(response);
            })
            this.getList();
            this.$message({
                message: '删除成功',
                type: 'success'
            });

        },
        // 退订
        async Unsubscribe(row) {
            console.log("点击了退订");
            console.log(row);
            await updateOrderStatus({ status: 3, id: row.id }).then(response => {
                console.log(response);
            })

            this.getList();
            this.$message({
                message: '退订成功',
                type: 'success'
            });
        },
        getList() {
            listOrders(this.queryParams).then(response => {
                console.log(response.data);
                console.log(response);
                this.OrdersList = response.data.list;
                this.pageInfo.pageCount = response.data.pages;
                this.pageInfo.total = response.data.total;
                this.pageInfo.currentPage = 1
            })
        },
        myinitOrders() {
            initOrders();
        },
		
		// 生成发票
		generateBill(row){
			
			console.log(row)
			this.form.orderId = row.id
			this.form.money = row.money
			addBill(this.form).then(response => {
			  this.$modal.msgSuccess("发票生成成功");
			  this.open = false;
			  this.getList();
			})
		},
		
        selectOrders() {
            // console.log("query:");
            // console.log("roomNameInput:" + this.formData.roomNameInputed);
            // console.log("statusSelected:" + this.formData.statusSelectd);
            this.queryParams.pageNum = 1
            this.pageInfo.currentPage =1
            if (this.formData.roomNameInputed != undefined && this.formData.roomNameInputed != '') {
                this.queryParams.rname = this.formData.roomNameInputed;
            } else { this.queryParams.rname = '-1' }

            if (this.formData.statusSelectd != undefined && this.formData.statusSelectd != '') {
                this.queryParams.statusId = this.formData.statusSelectd
            } else { this.queryParams.statusId = '-1' }

            this.getList()

        }
    }
}
</script>
